<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        back-text=""
        title="我的收藏"
        :background="{ backgroundColor: !isScroll ? '#F4F6F8' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="p-4">
      <view class="flex flex-col gap-2">
        <view
          v-for="(i, k) in dataList"
          :key="k"
          class="flex gap-2 bg-white p-3 rounded-[.75rem]"
          @click="jumpDetails(i)"
        >
          <view class="w-[6.1875rem] h-[8.25rem] rounded-[.5rem] flex-none relative overflow-hidden">
            <u-image :src="i.thumb" class="!size-full"></u-image>
            <view class="size-full flex absolute inset-0 flex-col flex-grow justify-between p-1">
              <view
                :class="i.basan_type == 1 ? 'bg-[#00A9AB]' : 'bg-[#000]'"
                class="px-[.25rem] py-[.1875rem] rounded-[.125rem] flex justify-center items-center absolute"
              >
                <text class="text-[#FFFFFF] text-[.625rem] leading-none">
                  {{ i.basan_type == 1 ? '手杆' : '路亚' }}</text
                >
              </view>
              <view></view>
              <view class="flex justify-between">
                <view
                  v-for="(img, k) in i.images.split('|').slice(0, 3)"
                  :key="k"
                  class="relative"
                  :class="k > 0 ? '-ml-3' : ''"
                >
                  <view
                    class="size-[1.5rem] rounded-[.3125rem] border-[.0625rem] border-solid border-[#FFFFFF] overflow-hidden relative z-[1]"
                    :style="`z-index: ${3 - k};`"
                  >
                    <u-image :src="img" class="!size-full" mode="aspectFill" />
                  </view>
                </view>
                <view class="text-[.875rem] text-transparent ml-1">+{{ i.images.split('|').length }} </view>
              </view>
            </view>
          </view>
          <view class="flex flex-col flex-1 justify-between">
            <view class="text-[.9375rem] text-[#171B24] line-clamp-1">{{ i.name }}</view>
            <view class="text-[.75rem] text-[#919499] line-clamp-2">{{ i.description }} </view>
            <view class="flex gap-1 items-center">
              <view
                v-for="(i, k) in i.ext.fish_species"
                :key="k"
                class="px-[.375rem] py-[.1875rem] rounded-[.25rem] border-[.0625rem] border-solid border-[#BFE8E9]"
              >
                <view class="text-[#00A9AB] text-[.625rem]"> {{ i.name }} </view>
              </view>
            </view>
            <view class="flex items-center text-[.75rem] text-[#606368] gap-2">
              <image :src="vk.myfn.handleImageUrl(i.weather.lives[0].item)" mode="aspectFill" class="size-[.875rem]" />

              <text>{{ i?.weather?.lives[0].weather }}</text>
              <text class="w-[.0625rem] h-[.5rem] border-[.0625rem] border-solid border-[#C1C4C9]"></text>
              <text>{{ i?.weather?.lives[0].temperature }}°C</text>
              <text class="w-[.0625rem] h-[.5rem] border-[.0625rem] border-solid border-[#C1C4C9]"></text>

              <text>{{ i?.ext?.district?.name }}</text>
            </view>
            <view class="flex justify-between items-center">
              <view class="flex gap-1 items-center">
                <u-icon name="map-fill" color="#919499" size="22"></u-icon>
                <text class="text-[.6875rem] text-[#919499] line-clamp-1">{{ i.location_name }}</text>
              </view>
              <view class="text-[.6875rem] text-[#919499]"> {{ i.distance }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false // 是否自动加载
      }
    },
    onLoad(options) {
      console.log('res==> ', vk.myfn)
      console.log('res==> ', vk.getConfig())
    },
    methods: {
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.reload()
            }
          }
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        let res = await api.collectList({
          page,
          limit,
          lat: vk.getVuex('$user.positioning').lat || '',
          lng: vk.getVuex('$user.positioning').lng || ''
        })
        this.$refs.paging.complete(res.data)
      },
      // 删除收藏
      async delCollect() {
        let res = await api.delCollect({
          id: this.id
        })
        if (!res.code) return
        vk.toast(res.msg, 'none')
        this.$refs.paging.refresh()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
